<template>
  <van-picker
    show-toolbar
    :columns="store.state.popup.columns"
    @cancel="handleIspopup"
    @confirm="onConfirm"
  />
</template>

<script>
import { ref } from "vue";
import { useStore } from "vuex";

export default {
  name: "pickerPopup",
  setup() {
    //所选值
    const selectValue = ref(null);
    // const columns=ref(['杭州', '宁波', '温州', '绍兴', '湖州', '嘉兴', '金华', '衢州'])
    //选值完成后 根据弹出框类型 修改筛选框选项的值
    const onConfirm = (value) => {
      selectValue.value = value;
      if (store.state.popup.isPopupKind == "kind") {
        //修改种类id
        store.state.petFiltrate.category.forEach((item) => {
          if (item.pet_type == selectValue.value) {
            store.commit("petFiltrate/handleCategoryId", item.category_id);
          }
        });
        // console.log(store.state.petFiltrate.categoryId);
        store.commit("petFiltrate/handleKind", selectValue.value);
      } else if (store.state.popup.isPopupKind == "variety") {
        store.commit("petFiltrate/handleVariety", selectValue.value);
      } else if (store.state.popup.isPopupKind == "gender") {
        store.commit("authorFiltrate/handleGender", selectValue.value);
        // console.log(store.state.authorFiltrate.gender);
      } else if (store.state.popup.isPopupKind == "petAge") {
        store.commit("publishPet/handleAge", selectValue.value);
      }
      handleIspopup();
      // console.log(selectValue.value);
    };
    const store = useStore();
    //关闭弹出框
    const handleIspopup = () => {
      store.commit("popup/handleIspoup");
    };
    return {
      store,
      onConfirm,
      handleIspopup,
    };
  },
};
</script>

<style scoped></style>
